import React, { Component, PropTypes } from 'react'
import {
  StyleSheet,
  Platform,
  TouchableOpacity,
  Image,
  StatusBar,
  Text,
  View
} from 'react-native'
import {Icon} from './icon'

const NAV_BAR_HEIGHT_ANDROID = 44
const NAV_BAR_HEIGHT_IOS = 44
const STATUS_BAR_HEIGHT = 20
const StatusBarShape = {
  backgroundColor: PropTypes.string,
  barStyle: PropTypes.oneOf(['light-content', 'default', 'dark-content']),
  hidden: PropTypes.bool
}

export default class NavigationBar extends Component {
  static propTypes = {
    style: View.propTypes.style,
    title: PropTypes.string,
    titleColor: PropTypes.string,
    titleView: PropTypes.element,
    hide: PropTypes.bool,
    leftButton: PropTypes.element,
    leftButtonHide: PropTypes.bool,
    rightButton: PropTypes.element,
    statusBar: PropTypes.shape(StatusBarShape)
  }
  static defaultProps = {
    statusBar: {
      barStyle: 'light-content',
      hidden: false,
    },
    titleColor: '#333333'
  }
  constructor(props) {
    super(props)

    this.state = {
      title: '',
      hide: false
    }
  }
  render() {
    let statusBar = this.props.statusBar.hidden ? null : <View style={[styles.statusBar, {backgroundColor: this.props.statusBar.backgroundColor || '#ffffff'}]}><StatusBar {...this.props.statusBar}/></View>
    let titleView = this.props.titleView ? this.props.titleView : <Text style={[styles.title, {color: this.props.titleColor}]}>{this.props.title}</Text>
    let content = this.props.hide ? null :
      <View style={styles.navBar}>
        {this.getButtonElement(this.props.leftButton, 'left')}
        <View style={styles.titleViewContainer}>
          {titleView}
        </View>
        {this.getButtonElement(this.props.rightButton, 'right')}
      </View>
    return (
      <View style={[styles.container, this.props.style]}>
        {statusBar}
        {content}
      </View>
    )
  }
  getButtonElement = (data, type) => {
    const leftButton = this.props.leftButtonHide ? null : <TouchableOpacity onPress={this._leftIconEvent.bind(this)} style={{padding: 15}}>
                          <Icon name="icon_back" size={20} color="#333333" />
                      </TouchableOpacity>
    return (
      <View style={styles.navBarButton}>
          {data ? data : type === 'left' ? leftButton : null}
      </View>
    )
  }
  _leftIconEvent = () => {
    this.props.navigator.pop()
  }
}

const styles = StyleSheet.create({
  container: {

  },
  statusBar: {
    height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0,
  },
  navBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
  },
  titleViewContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    left: 40,
    right: 40,
    top: 0,
    bottom: 0,
  },
  title: {
    fontSize: 16,
    backgroundColor: 'transparent'
  },
  navBarButton: {
    alignItems: 'center',
    paddingRight: 15,
  },
})
